<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="shortcut icon" href="./src/img/favicon.ico">
  <title>Web前端个人简历</title>

  <!-- ---------------CSS引用--------------------- -->
  <link rel="stylesheet" href="lib/bootstrap.min.css"><!-- bootsarap -->
  <link rel="stylesheet" href="lib/lizi/style.css"><!-- 粒子样式 -->
  <link rel="stylesheet" href="src/css/base.min.css"><!--    自己的CSS压缩版-->
</head>

<body>

<!-- ---------------JS--------------------- -->

  <script src="lib/less.min.js"></script> <!--  less-->
  <script src="lib/jquery.min.js"></script><!-- jq,bootsrap-->
  <script src="lib/bootstrap.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script><!--  vue-->
  <script src="lib/lizi/particless.min.js"></script><!-- 粒子js -->

  <!--    被替换的html-->
  <div id="box"></div>

  <script type="module">
    import configData from './src/config.js';//加载配置文件

    $('#box').load('html/main.html',function () {
      console.log('---loadCallBack---');
      new Vue({
        el:'#wrap',
        data:{
          configData,
          arrMastering:[]
        },
        mounted(){
          //加载粒子
          particlesJS.load('particles', 'lib/lizi/particles.json', function() {
            console.log('callback - particles.js config loaded');
          });
          this.arrMastering=this.configData.page4.proresslist;

          //对window滚动的监听
          window.addEventListener('scroll',this.scrollEvent)
          this.bindEvenInit();
        },
        methods:{
          //锚点定位初始化
          bindEvenInit(){
            $('.navbtn').bind("click touch",function () {
              //scrollTop 滚动到  $(this).attr('href')锚点关联id所在位置
              $('html,body').animate({scrollTop:($($(this).attr('href')).offset().top)},500)
              return false
            })
            $(function () {
              $('[data-toggle="tooltip"]').tooltip()
            });
            $('.element').on('click',function () {
              $(this).popover('toggle')
            })

            $('#slideBut').on("click touch",function () {
              $('#slideList').slideToggle(1000);
            })

            $('.navbtn').click(function () {
              $('#slideList').css('display','none')
            })
          },
          //播放音乐初始化方法
          audioInit(){
            var audio =$('#audio').children('audio')[0];
            if(audio){
              var audioControls=$('#audio').children('.audio-controls')[0]
              if(audio){
                audio.volume=0.05;//默认音量
                $('#audioClick').click(function () {
                  if(audio.paused){
                    audio.play();
                    audioControls.style.animationPlayState="running"
                    $('#audioClick').addClass('icon-play_fill').removeClass('icon-zantingtingzhi')
                  }else {
                    audio.pause();
                    audioControls.style.animationPlayState="paused"
                    $('#audioClick').addClass('icon-zantingtingzhi').removeClass('icon-play_fill')
                  }
                })
              }
            }
          },
          //删除元素函数
          removeElement(_element){
            var _parentElement = _element.parentNode;
            if(_parentElement){
              _parentElement.removeChild(_element);
            }
          },
          scrollEvent(){
            var vues=this;
            var a,b,c;
            a=$(window).height();//页面高度
            b=$(window).scrollTop();//获取滚动高度

            $('.page').each(function () {
              c=$(this).offset().top;
              var tag=true;
              if(a+b-120>c){
                if(!$(this).find('.container').hasClass('animateload')) {
                  $(this).find('.container').addClass('animateload')
                }

                if($(this)[0].id=='page4'||tag){
                  tag=false
                  $(this).find('.proress').each(function (i,n) {
                    $(this).find('.bar-propress')[0].style.width=vues.arrMastering[i].value;
                    $(this).find('.propress-title').text(vues.arrMastering[i].title);
                    $(this).find('.bar-propress').children('span').text(vues.arrMastering[i].value)
                  })
                }
              }else {
                // if($(this).find('.container').hasClass('animateload')) {$(this).find('.container').removeClass('animateload')}
              }
            })
          }
        }
      })
    });
  </script>


</body>



</html>
